<script setup lang="ts">
  const props = defineProps<{
    orderDetail: OrderDetail
  }>()
</script>

<template>
  <div>
    <div class="order_detail_network_info">
      <div class="title">部门信息</div>
      <div class="info_list">
        <div class="info_item_container">
          <div class="info_item">
            <div class="label">部门名称:</div>
            <div class="value">{{ props.orderDetail.network }}</div>
          </div>
          <div class="info_item">
            <div class="label">接单时间:</div>
            <div class="value">{{ props.orderDetail.receivingOrderTime }}</div>
          </div>
        </div>
        <div class="info_item_container">
          <div class="info_item">
            <div class="label">负责人:</div>
            <div class="value">
              <span>{{ props.orderDetail.networkManaterEmp }}</span>
              <span>&nbsp;</span>
              <span>{{ props.orderDetail.networkManaterPhone }}</span>
            </div>
          </div>
          <div class="info_item">
            <div class="label">派工时间:</div>
            <div class="value">{{ props.orderDetail.dispatchOrderEngineerTime }}</div>
          </div>
        </div>
        <div class="info_item_container">
          <div class="info_item">
            <div class="label">工程师:</div>
            <div class="value">
              <span>{{ props.orderDetail.engineerManagerEmp }}</span>
              <span>&nbsp;</span>
              <span>{{ props.orderDetail.engineerManagerPhone }}</span>
            </div>
          </div>
          <div class="info_item">
            <div class="label">工程师接单时间:</div>
            <div class="value">{{ props.orderDetail.engineerReceivingOrderTime }}</div>
          </div>
        </div>
        <div class="info_item_container">
          <div class="info_item" style="width: 100%">
            <div class="label">地址:</div>
            <div class="value" style="white-space: wrap">{{
              props.orderDetail.networkAddress
            }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order_detail_network_info {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 6px;
      border-left: 3px solid $primaryColor;
    }

    .info_list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-left: 9px;

      .info_item_container {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;

        .info_item {
          display: flex;
          gap: 5px;
          width: 240px;

          .label {
            color: #606266;
            text-align: right;
            white-space: nowrap;
          }

          .value {
            white-space: nowrap;
            min-width: 140px;
          }
        }
      }
    }
  }
</style>
